<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var image = new Image();      
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext('2d'); 
image.src = "images/1.jpg";  
image.onload = function(){  
	//创建填充样式，全方向平铺
	var ptrn = context.createPattern(image,'repeat'); 
	//指定填充样式
	context.fillStyle = ptrn;  
	//填充画布
	context.fillRect(0,0,400,300);  
};        
</script>
</body>
</html> 
